<template>
    <div class="app-header-fixed app-aside-fixed h-full" v-bind:class="{'app-aside-folded':asideFolded}">
        <!--Header -->
        <app-header></app-header>
        <!--/ Header -->

        <!--Menu -->
        <app-sider></app-sider>
        <!--/ Menu -->

        <!-- content -->
        <div class="app-content">
            <!--<div ui-butterbar></div>-->
            <a href class="off-screen-toggle hide" ui-toggle-class="off-screen" data-target=".app-aside" ></a>
            <div class="app-content-body animated">
                <router-view></router-view>
            </div>
        </div>
        <!-- /content -->

        <!--modal-->
        <modal title="Fade Modal" :show.sync="modal.fadeModal" effect="fade" width="800">
            <div slot="modal-header" class="modal-header">
                <h4 class="modal-title">
                    <i>Custom</i> <code>Modal</code> <b>Title</b>
                </h4>
            </div>
            <div slot="modal-body" class="modal-body">
                这里是内容区域.
            </div>
            <div slot="modal-footer" class="modal-footer">
                <button type="button" class="btn btn-default" @click="modal.fadeModal = false">Exit</button>
                <button type="button" class="btn btn-dark" @click="modal.fadeModal = false">Custom Save</button>
            </div>
        </modal>

    </div>
</template>

<script>

    import VueStrap from 'vue-strap'

    export default {        //这里是官方的写法，默认导出，ES6
        data () {           //ES6，等同于data:function(){}
            return {        //必须使用这样的形式，才能创建出单一的作用域
                app :{
                    name: 'Paas',
                    version: '1.3.3',
                    color: {
                        primary: '#7266ba',
                        info:    '#23b7e5',
                        success: '#27c24c',
                        warning: '#fad733',
                        danger:  '#f05050',
                        light:   '#e8eff0',
                        dark:    '#3a3f51',
                        black:   '#1c2b36'
                    },
                    settings: {
                        themeID: 1,
                        navbarHeaderColor: 'bg-black',
                        navbarCollapseColor: 'bg-white-only',
                        asideColor: 'bg-black',
                        asideSubColor: 'bg-light',
                        headerFixed: true,
                        asideFixed: false,
                        asideFolded: false,
                        asideDock: false,
                        container: false
                    }
                },
                asideFolded:false,
                modal:{
                    fadeModal:false
                }
            }
        },
        ready () {

        },
        methods :{

        },
        events: {
            'asideFold':function(){
                this.asideFolded = !this.asideFolded;
            },
            'asideExpand':function(){
                this.asideFolded = false;
            },
            'modalOpen':function(){
                this.modal.fadeModal = true;
            }
        },
        components: {
            "appHeader":require('../blocks/appHeader'),
            "appSider":require('../blocks/appSider'),
             modal:VueStrap.modal
        }
    }
</script>